/*
 * @Author: songjian
 * @Date: 2018-11-05 17:27:48
 * @Last Modified by: songjian
 * @Last Modified time: 2018-11-07 09:44:02
 */

import React from 'react';
import { Table, Input, Button, Divider, Popconfirm, Form, Icon } from 'antd';

import styles from './index.module.less';

const FormItem = Form.Item;
const EditableContext = React.createContext();

export default class CustomGroup extends React.Component {
  constructor(props) {
    super(props);
    /* this.columns = [
      {
        creation_time: 'ocreation_time',
        dataIndex: 'creation_time',
        render: (text, record) => {
          return (
            this.state.dataSource.length >= 1
              ? (
                <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
                  <a>Delete</a>
                </Popconfirm>
              ) : null
          );
        },
      },
    ]; */

    this.state = {
      dataSource: [
        {
          key: '1',
          first_level_group_name: '废金属',
          second_level_group_name: '有色金属',
          number_of_goods: '40个',
        },
        {
          key: '2',
          first_level_group_name: '废金属',
          second_level_group_name: '有色金属',
          number_of_goods: '40个',
        },
        {
          key: '3',
          first_level_group_name: '废金属',
          second_level_group_name: '有色金属',
          number_of_goods: '40个',
        },
      ],
      count: 3,
      columns: [
        {
          title: '一级分组名称',
          dataIndex: 'first_level_group_name',
          key: 'first_level_group_name',
          align: 'center',
          // render: text => <a>{text}</a>,
        },
        {
          title: '二级分组名称',
          dataIndex: 'second_level_group_name',
          key: 'second_level_group_name',
          align: 'center',
        },
        {
          title: '商品数',
          dataIndex: 'number_of_goods',
          key: 'number_of_goods',
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'create_time',
          key: 'create_time',
          align: 'center',
          render: () => (
            <span>
            2018-09-08 20:20:10
            </span>
          ),
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: () => (
            <span>
              <a className={styles.red}>修改</a>
              &ensp;
              <a className={styles.blue}>删除</a>
            </span>
          ),
        },
      ],
    };
  }

  onRow = record => {
    return {
      onClick: () => {
        console.log(record);
      },
    };
  }

  render() {
    const { dataSource, columns } = this.state;
    return (
      <div className={styles.ui_custom_group}>
        <Button type="primary" className={styles.build_group_btn}><Icon type="plus" theme="outlined" />新建分组</Button>
        <Table className={styles.table} onRow={this.onRow} columns={columns} dataSource={dataSource} />
      </div>
    );
  }
}

// ReactDOM.render(<EditableTable />, mountNode);
